<template>
  <div class="container">
    <!-- 搜索栏 -->
    <van-search v-model="searchValue" shape="round" background="var(--gradient-primary)" input-align="center" 
      placeholder="请输入搜索关键词">
      <template #right-icon>
        <van-button round type="primary" size="small" color="var(--gradient-primary)" style="width: 110%;">搜索</van-button>
      </template>
    </van-search>

    <!-- 功能导航 -->
    <div class="function-nav">
      <van-grid v-for="(row, index) in navRows" :key="index" :column-num="5" border="false" :gutter="4" square
        :cell-style="{ padding: '8px 0' }" :style="index > 0 ? 'margin-top: 4px;' : ''">
        <van-grid-item v-for="(item, itemIndex) in row" :key="itemIndex" class="nav-item"
          @click="item.action ? item.action() : null">
          <div class="nav-icon">
            <img :src="item.icon" class="icon-img" />
          </div>
          <div class="nav-txt">{{ item.text }}</div>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 猜你想找 -->
    <div class="guess-you-want">
      <span class="title">猜你想找 · DeepSeek帮你搜寻</span>
      <van-icon name="refresh" size="20" color="#999" style="margin-left: 8px;" @click="refreshRecommendations" />
      <div class="tags">
        <span v-for="(tag, index) in tagsList" :key="index" class="tag hover-effect">
          {{ tag }}
        </span>
      </div>
    </div>

    <!-- 分类导航 -->
    <div class="category-nav">
      <span v-for="(category, index) in categories" :key="index"
        :class="['category', { 'active': activeCategory === index }]" @click="handleCategoryClick(index)">
        {{ category }}
      </span>
    </div>

    <!-- 推荐列表 -->
    <div class="recommend-cards">
      <!-- 刷新加载状态 -->
      <div v-if="isRefreshing" class="refresh-loading">
        <van-loading type="spinner" size="large" color="#ff9d00" />
      </div>
      
      <!-- 推荐卡片列表 -->
      <div v-else v-for="(place, index) in nearbyPlaces" :key="index" class="card-item fade-in">
        <div class="card-image-container">
          <van-image :src="place.imageUrl" class="card-cover" fit="cover" :ratio="16 / 9" />
        </div>
        <div class="card-info">
          <h3 class="card-title">{{ place.name }}</h3>
          <p class="card-desc">{{ place.reason }}</p>
          <div class="card-meta">
            <van-rate v-model="place.rateValue" allow-half readonly class="card-rate" />
            <span class="card-distance">{{ place.distance }}km</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 返回顶部按钮 -->
    <van-back-top :visibility-height="100" right="15vw" bottom="10vh"  />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';

const router = useRouter();

// 搜索值
const searchValue = ref('');

// 推荐地点数据
const nearbyPlaces = ref([]);

// 刷新状态
const isRefreshing = ref(false);
const activeCategory = ref(0);

// 模拟不同分类的数据
const categoryData = {
  0: [
    { id: 1, name: '渔火小馆', reason: '本地人强推/现捞海鲜', distance: '0.8', rateValue: 4.5, imageUrl: '/src/assets/referral/hx.jpg' },
    { id: 2, name: '滨海公园', reason: '日落观景点/免费打卡', distance: '1.2', rateValue: 4.2, imageUrl: '/src/assets/referral/scenrey.jpg' },
    { id: 3, name: '海景酒店', reason: '270°海景房/含早餐', distance: '1.8', rateValue: 4.7, imageUrl: '/src/assets/referral/tj.jpg' },
    { id: 4, name: '甜时烘焙', reason: '网红舒芙蕾/低糖甜品', distance: '0.5', rateValue: 4.0, imageUrl: '/src/assets/referral/qp.jpg' }
  ],
  1: [
    { id: 5, name: '老街面馆', reason: '30年老店/招牌牛肉面', distance: '0.3', rateValue: 4.3, imageUrl: '/src/assets/referral/ms1.jpg' },
    { id: 6, name: '海鲜餐厅', reason: '现捕海鲜/蒜蓉扇贝', distance: '1.5', rateValue: 4.6, imageUrl: '/src/assets/referral/ms2.jpg' },
    { id: 7, name: '川味火锅', reason: '正宗锅底/鲜毛肚', distance: '0.9', rateValue: 4.1, imageUrl: '/src/assets/referral/ms3.jpg' },
    { id: 8, name: '素食馆', reason: '养生素食/菌菇汤', distance: '1.1', rateValue: 4.4, imageUrl: '/src/assets/referral/ms4.jpg' }
  ],
  2: [
    { id: 9, name: '海景度假酒店', reason: '无敌海景/私人沙滩', distance: '2.1', rateValue: 4.8, imageUrl: '/src/assets/referral/jd1.jpg' },
    { id: 10, name: '商务酒店', reason: '市中心/免费接送', distance: '0.7', rateValue: 4.2, imageUrl: '/src/assets/referral/jd2.jpg' },
    { id: 11, name: '民宿小院', reason: '田园风格/农家菜', distance: '1.3', rateValue: 4.5, imageUrl: '/src/assets/referral/jd3.jpg' },
    { id: 12, name: '青年旅社', reason: '背包客首选/床位房', distance: '0.5', rateValue: 4.0, imageUrl: '/src/assets/referral/jd4.jpg' }
  ]
};

// 导航数据
const navRows = ref([
  [
    { icon: '/src/assets/referral/dy.png', text: '预约', action: () => router.push('/booking') },
    { icon: '/src/assets/referral/jd.png', text: '酒店' },
    { icon: '/src/assets/referral/jd2.png', text: '景点' },
    { icon: '/src/assets/referral/xc.png', text: '休闲玩乐' },
    { icon: '/src/assets/referral/jyz.png', text: '加油站' }
  ],
  [
    { icon: '/src/assets/referral/cfd.png', text: '咖啡厅' },
    { icon: '/src/assets/referral/td.png', text: '甜点饮品' },
    { icon: '/src/assets/referral/yh.png', text: '银行' },
    { icon: '/src/assets/referral/dtz.png', text: '地铁站' },
    { icon: '/src/assets/referral/yy.png', text: '医院' }
  ]
]);

const tagsList = ref([
  '附近景点', '美食推荐', '网红奶茶店', '步行街摊位'
]);

const categories = ref(['附近', '美食', '酒店', '景点', '露营', '遛娃', '名胜古迹']);

// 点击分类导航
const handleCategoryClick = (index) => {
  activeCategory.value = index;
  refreshRecommendations();
};

// 刷新推荐列表（含随机排序）
const refreshRecommendations = async () => {
  isRefreshing.value = true;
  
  // 白色闪一下效果
  const recommendCards = document.querySelector('.recommend-cards');
  if (recommendCards) {
    recommendCards.style.backgroundColor = '#fff';
    setTimeout(() => recommendCards.style.backgroundColor = '', 300);
  }
  
  // 模拟2秒刷新延迟
  await new Promise(resolve => setTimeout(resolve, 2000));
  
  // 获取对应分类数据并随机排序
  let categoryPlaces = categoryData[activeCategory.value] || [];
  // 随机排序
  categoryPlaces = [...categoryPlaces].sort(() => 0.5 - Math.random());
  
  // 更新列表
  nearbyPlaces.value = categoryPlaces.map(place => ({
    ...place,
    rateValue: parseFloat(place.rateValue.toFixed(1)) // 保留一位小数
  }));
  
  isRefreshing.value = false;
};

onMounted(() => {
  refreshRecommendations(); // 初始化加载"附近"分类数据
});
</script>

<style scoped lang="scss">
/* 基础容器样式 */
.container {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 1px;
}

/* 搜索栏样式 */
van-search {
  margin-bottom: 10px;
  .van-search__content {
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 功能导航样式 */
.function-nav {
  padding: 8px 12px;
  background-color: white;
  margin-bottom: 8px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.nav-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.icon-img {
  width: 24px;
  height: 24px;
}

.nav-txt {
  font-size: 11px;
  color: #666;
}

/* 猜你想找样式 */
.guess-you-want {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
  background-color: white;
  margin-bottom: 8px;
}

.title {
  font-size: 14px;
  color: #333;
  margin-right: 8px;
  font-weight: 500;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
  width: 100%;
}

.tag {
  margin-right: 8px;
  margin-bottom: 4px;
  padding: 4px 12px;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  background: linear-gradient(135deg, #e9ecef, #dee2e6);
  color: #495057;
}

/* 分类导航样式 */
.category-nav {
  display: flex;
  overflow-x: auto;
  padding: 8px 16px;
  background: white;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  scrollbar-width: none;
  margin-bottom: 8px;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.category {
  padding: 6px 16px;
  margin-right: 12px;
  border-radius: 20px;
  font-size: 13px;
  color: #666;
  background: #f5f5f5;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category.active {
  color: #fff;
  background: linear-gradient(135deg, #ff9d00, #ff7d00);
  box-shadow: 0 2px 4px rgba(255, 125, 0, 0.2);
}

/* 推荐列表样式 */
.recommend-cards {
  padding: 0 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 刷新加载状态样式 */
.refresh-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
}

.card-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s;
}

.card-item:hover {
  transform: translateY(-5px);
}

/* 图片容器样式 - 强制比例 */
.card-image-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 固定比例 */
  overflow: hidden;
}

.card-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px 12px 0 0;
}

.card-info {
  width: 85%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 新增：内容水平居中 */
  text-align: center; /* 新增：文本居中 */
}

.card-title {
  font-size: 16px;
  color: #1a1a1a;
  margin-bottom: 8px;
  font-weight: 600;
}

.card-desc {
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
  line-height: 1.5;
  text-align: center; /* 新增：描述文本居中 */
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center; /* 新增：元数据水平居中 */
}

.card-rate {
  margin-right: 4px;
}

.card-distance {
  font-size: 12px;
  color: #777;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}
</style>
